<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>编辑频道</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">

<div class="layui-body">

	<blockquote class="layui-elem-quote" th:text="${errorMsg}" th:style="'color: red;display:' + (${errorMsg} == null ? 'none' : 'block')"></blockquote>

	<form class="layui-form" th:action="@{/index_page/channel/save}" method="post">
		<input type="hidden" name="id" th:value="${channel} == null ? '' : ${channel.id}">
		<div class="layui-form-item">
		    <label class="layui-form-label"><span style="color: red;">*</span>名称</label>
		    <div class="layui-input-inline">
		      	<input name="name" class="layui-input" type="text" placeholder="请输入" autocomplete="off"
		      		maxlength="6" lay-verify="required|channelName" th:value="${channel} == null ? '' : ${channel.name}">
		    </div>
		     <div class="layui-input-inline layui-form-mid layui-word-aux">
		    	请输入2～6字
		    </div>
	  	</div>
	  	<div class="layui-form-item">
		    <label class="layui-form-label"><span style="color: red;">*</span>排序权重</label>
		    <div class="layui-input-inline">
		      	<input name="sort" class="layui-input" type="text" placeholder="请输入数字" autocomplete="off"
		      		lay-verify="required|number|channelSort" th:value="${channel} == null ? '1' : ${channel.sort}">
		    </div>
		    <div class="layui-input-inline layui-form-mid layui-word-aux">
		    	请输入1～9999的整数
		    </div>
	  	</div>

	  	<div class="layui-form-item" th:if="${channel == null}">
		    <label class="layui-form-label"><span style="color: red;">*</span>模版</label>
		    <div class="layui-input-block">
		    	<input type="radio" name="templateId" value="1" th:checked="${channel == null} ? false : ${channel.templateId == '1'}">
		    	<img alt="模版1" style="width: 217px;height: 88px;" th:src="@{/images/template_01.jpg}">
		    </div>
	  	</div>
	  	<div class="layui-form-item" th:if="${channel == null}">
		    <label class="layui-form-label"></label>
		    <div class="layui-input-block">
		    	<input type="radio" name="templateId" value="2" th:checked="${channel} == null ? false : ${channel.templateId == '2'}">
		    	<img alt="模版2" style="width: 328px;height: 80px;" th:src="@{/images/template_02.jpg}">
		    </div>
	  	</div>
	  	<div class="layui-form-item" th:if="${channel == null}">
		    <label class="layui-form-label"></label>
		    <div class="layui-input-block">
		    	<input type="radio" name="templateId" value="3" th:checked="${channel} == null ? false : ${channel.templateId == '3'}">
		    	<img alt="模版3" style=" width: 310px;height: 88px;"th:src="@{/images/template_03.jpg}">
		    </div>
	  	</div>
		<div class="layui-form-item">
			<label class="layui-form-label">埋点事件名称</label>
			<div class="layui-input-inline">
				<input name="eventName" class="layui-input" type="text" placeholder="请输入" autocomplete="off"
					   th:value="${channel} == null ? '' : ${channel.eventName}">
			</div>
			<div class="layui-input-inline layui-form-mid layui-word-aux">
				邻里服务 LJSYNeighborService  邻里交易 LJSYNeighborTrade 邻里活动 LJSYNeighborActivity
			</div>
		</div>
		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
      			<a th:href="@{/index_page/channel/list}"  class="layui-btn">取消</a>
    		</div>
  		</div>
	</form>

	<div style="height: 70px"></div>
</div>

</div>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
$(document).ready(function(){
	$(".layui-body").css({"left": "10px","top": "10px"});
});
//一般直接写在一个js文件中
var form;
layui.use(['layer', 'form'], function(){
	var layer = layui.layer;
	form = layui.form;

	form.verify({
		channelName: function(value, item) {
			if(value.length < 2 || value.length > 6)
				return '限制2～6字';
		}
		, channelSort: function(value, item) {
			var patrn = /^[1-9][0-9]{0,3}$/;
		  	if (!patrn.test(value)) {
		  		return '请输入1～9999的整数';
		  	}
		}

	});

	form.on('submit(formDemo)', function (data) {
	    //console.log(data.field)
	    if (data.field.id == '' && !data.field.templateId){
	    	layer.msg('请选择模版')
	    	return false;
	    }
	    return true;
	});
});
</script>
</body>
</html>